<template>
    <div id="reg">
        <div class="head">
            <van-image
                round
                src="https://tse1-mm.cn.bing.net/th/id/R-C.8ffd6f35dd02bb9b104036fedeffcdf8?rik=wmIhLx3GDssUfQ&riu=http%3a%2f%2fimg.duoziwang.com%2f2019%2f06%2f10190839804216.jpg&ehk=VzaDmQGOA%2fC99dRxmtZgM3DvFCalZrcJ7NPl1hY34vQ%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
            ></van-image>
        </div>
        <van-form @submit="onSubmit" :show-error-message="false">
            <input
                type="text"
                value=""
                style="position: absolute; top: -9999px"
            />
            <input
                type="password"
                value=""
                style="position: absolute; top: -9999px"
            />
            <van-field
                v-model="username"
                left-icon="phone"
                placeholder="请输入手机号"
                :rules="[
                    {
                        required: true,
                        message: '请填写手机号',
                        validator: $valid.checkTel,
                    },
                ]"
            />
            <van-field
                v-model="password"
                type="password"
                placeholder="请输入密码"
                left-icon="lock"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                v-model="comfirmPass"
                type="password"
                placeholder="请再次输入密码"
                left-icon="lock"
                :rules="[
                    {
                        required: true,
                        message: '请再次输入密码',
                        validator: checkPwd,
                    },
                ]"
            />
            <van-field
                v-model="nick_name"
                left-icon="manager"
                placeholder="请输入昵称"
                :rules="[{ required: true, message: '请输入昵称' }]"
            />
            <van-field
                v-model="email"
                left-icon="invitation"
                placeholder="请输入电子邮箱"
                :rules="[
                    {
                        required: true,
                        message: '请输入电子邮箱',
                        validator: $valid.checkEmail,
                    },
                ]"
            />
            <div style="margin: 16px 16px 0">
                <van-button block type="info" native-type="submit"
                    >注册</van-button
                >
            </div>
            <van-divider
                :style="{ borderColor: '#ddd', padding: '0 16px' }"
                @click="onLoginClick"
            >
                已有账号，去登陆
            </van-divider>
        </van-form>
    </div>
</template>
<script>
export default {
    name: "Reg",
    data() {
        return {
            username: "",
            password: "",
            comfirmPass: "",
            nick_name: "",
            email: "",
        };
    },
    methods: {
        onLoginClick() {
            this.$router.push("/login");
        },
        onSubmit() {
            let api = this.$http.api.member.register();
            this.$http.callApi(api,{
                data:{
                    telephone:this.username,
                    password:this.password,
                    nick_name:this.nick_name,
                    email:this.email
                }
            }).then(res=>{
                this.$toast.success({
                    duration: 600,
                    message: "注册成功，请登陆！",
                });
                setTimeout((_) => {
                    this.$router.push("/login");
                }, 1000);
            })
        },
        checkPwd(val) {
            if (val == this.password) {
                return true;
            } else {
                this.$toast.fail("两次密码不一致!");
                return false;
            }
        },
    },
};
</script>
<style lang="less" scoped>
.head {
    height: 460px;
    padding-bottom: 100px;
    background-color: @blue-light;
    display: flex;
    justify-content: center;
    align-items: center;
}
.van-image {
    width: 150px;
    height: 150px;
}
.van-form {
    margin: -100px 30px 0;
    background-color: #fff;
    padding: 50px 0 30px;
    border-radius: 20px;
    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.01);
}
.van-form .van-cell /deep/ .van-icon {
    color: #aaa;
}
</style>